<template>
  <a-modal
    title="新增兑换码库"
    :width="560"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :destroyOnClose="true"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="兑换码库名称">
          <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入兑换码库名称' }] }]" />
        </a-form-item>
        <a-form-item label="描述">
          <a-input v-decorator="['desc']" />
        </a-form-item>
        <a-form-item label="兑换码有效期">
          <a-select v-decorator="['validity', { rules: [{ required: true, message: '请选择兑换码有效期' }] }]">
            <a-select-option :value="10">永久有效</a-select-option>
            <a-select-option :value="20">固定时间</a-select-option>
            <a-select-option :value="30">相对时间</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="兑换码开始时间" v-if="form.getFieldValue('validity') === 20">
          <a-date-picker
            format="YYYY-MM-DD HH:mm"
            v-decorator="['start_time', { rules: [{ required: true, message: '请选择开始时间' }] }]"
            :style="{ width: '100%' }"
            show-time
          />
        </a-form-item>
        <a-form-item label="兑换码结束时间" v-if="form.getFieldValue('validity') === 20">
          <a-date-picker
            format="YYYY-MM-DD HH:mm"
            v-decorator="['end_time', { rules: [{ required: true, message: '请选择结束时间' }] }]"
            :style="{ width: '100%' }"
            show-time
          />
        </a-form-item>

        <a-form-item label="开始天数" v-if="form.getFieldValue('validity') === 30">
          <a-input-number
            v-decorator="['start_day', { rules: [{ required: true, message: '请选择开始天数' }] }]"
            :style="{ width: '100%' }"
          />
        </a-form-item>
        <a-form-item label="结束天数" v-if="form.getFieldValue('validity') === 30">
          <a-input-number
            v-decorator="['end_day', { rules: [{ required: true, message: '请选择结束天数' }] }]"
            :style="{ width: '100%' }"
          />
        </a-form-item>

        <a-form-item label="兑换模式">
          <a-select v-decorator="['mode', { rules: [{ required: true, message: '请选择兑换模式' }] }]">
            <a-select-option :value="10">全部奖励品</a-select-option>
            <a-select-option :value="20">任选一份奖励品</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="兑换码格式">
          <a-select v-decorator="['format', { rules: [{ required: true, message: '请选择兑换码格式' }] }]">
            <a-select-option :value="10">英文数字组合</a-select-option>
            <a-select-option :value="20">纯数字组合</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="限制兑换次数">
          <a-select v-decorator="['number', { rules: [{ required: true, message: '请选择限制兑换次数' }] }]">
            <a-select-option :value="10">每天兑换次数</a-select-option>
            <a-select-option :value="20">永久兑换次数</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="每天兑换次数" v-if="form.getFieldValue('number') === 10">
          <a-input-number
            v-decorator="['number_day', { rules: [{ required: true, message: '请输入每天兑换次数' }] }]"
            :style="{ width: '100%' }"
          />
        </a-form-item>

        <a-form-item label="永久兑换次数" v-if="form.getFieldValue('number') === 20">
          <a-input-number
            v-decorator="['number_all', { rules: [{ required: true, message: '请输入永久兑换次数' }] }]"
            :style="{ width: '100%' }"
          />
        </a-form-item>

        <a-form-item label="礼品卡积分">
          <a-input-number
            v-decorator="['score', { rules: [{ required: true, message: '请输入礼品卡积分' }] }]"
            :style="{ width: '100%' }"
          />
        </a-form-item>
        <a-form-item label="礼品卡余额">
          <a-input-number
            v-decorator="['money', { rules: [{ required: true, message: '请输入礼品卡余额' }] }]"
            :style="{ width: '100%' }"
          />
        </a-form-item>
        <a-form-item label="奖励类型">
          <a-select v-decorator="['type', { rules: [{ required: true, message: '请选择奖励类型' }] }]">
            <a-select-option value="10">商品</a-select-option>
            <a-select-option value="20">余额</a-select-option>
            <a-select-option value="30">积分</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import * as Api from '@/api/gift'
export default {
  props: {},
  data() {
    return {
      // 对话框标题
      title: '',

      // 标签布局属性
      labelCol: {
        span: 6,
      },

      // 输入框布局属性
      wrapperCol: {
        span: 18,
      },

      // modal(对话框)是否可见
      visible: false,

      // modal(对话框)确定按钮 loading
      confirmLoading: false,

      // 当前表单元素
      form: this.$form.createForm(this),
    }
  },

  mounted() {},

  methods: {
    // 显示对话框
    add() {
      // 显示窗口
      this.visible = true
    },

    // 确认按钮
    handleSubmit(e) {
      e.preventDefault()
      // 表单验证
      const {
        form: { validateFields },
      } = this
      validateFields((errors, values) => {
        // 提交到后端api
        if (!errors) {
          this.onFormSubmit(values)
        }
      })
    },

    // 关闭对话框事件
    handleCancel() {
      this.visible = false
      this.form.resetFields()
    },

    // 提交到后端api
    onFormSubmit(values) {
      this.confirmLoading = true
      Api.addQcode({ form: values })
        .then((result) => {
          // 显示成功
          this.$message.success(result.message, 1.5)
          // 关闭对话框事件
          this.handleCancel()
          // 通知父端组件提交完成了
          this.$emit('handleSubmit', values)
        })
        .finally((result) => {
          this.confirmLoading = false
        })
    },
  },
}
</script>
